<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='720px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{viewForm.name?viewForm.name:'预览策略'}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="ana_tips flexbox flexcenter">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.3331 6.66673C13.3331 8.93596 11.9159 10.8742 9.91825 11.6446H7.99975H6.08125C4.08361 10.8742 2.66641 8.93596 2.66641 6.66673C2.66641 3.7212 5.05421 1.3334 7.99975 1.3334C10.9453 1.3334 13.3331 3.7212 13.3331 6.66673Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.91827 11.6445L9.6919 14.361C9.6775 14.5338 9.53307 14.6667 9.3597 14.6667H6.6398C6.46644 14.6667 6.322 14.5338 6.30764 14.361L6.08124 11.6445" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M5.60001 4.8V8L8.00001 6.4L10.4 8V4.8" stroke="white" stroke-width="1.12" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span class="font_14 color_01" style="margin-left:10px">每{{viewForm.segmentation_type == '3'?'三十':'十分'}}分钟执行一次策略，如需修改请前往策略设置。</span>
            </div>
            <div class="demand_center flex">
                <div class="view_title">应用对象</div>
                <el-radio-group v-model="type" size="small" style="margin-top:20px">
                    <el-radio-button label="1">广告组</el-radio-button>
                    <el-radio-button label="2">广告账户</el-radio-button>
                </el-radio-group>
                <el-table :data="viewForm.adverData" class="com_table" max-height="320px" style="margin-top:20px" v-if="type==1" key="adver">
                    <el-table-column prop="name" label="广告组名称">
                    </el-table-column>
                    <el-table-column prop="id" label="广告组 ID" width="200">
                    </el-table-column>
                </el-table>
                <el-table :data="viewForm.userData" class="com_table" max-height="320px" style="margin-top:20px" v-else-if="type==2" key="user">
                    <el-table-column prop="name" label="账户名称">
                    </el-table-column>
                    <el-table-column prop="advertiser_id" label="账户id">
                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="110">
                        <template slot-scope="scope">
                            <div class="adv_name" v-for="item in scope.row.type" :key="item">{{item==1?"直播托管":"短视频托管"}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="view_title mt_12">规则组触发规则</div>
                <template v-if="viewForm.is_trigger">
                    <div class="flexbox view_rules" v-for="(item,index) in viewForm.triggerData.operation" :key="index">
                        <div class="vw_left">规则设置</div>
                        <div class="vw_right flex">满足 {{item.condition!==''?viewForm.triggerData.condition[item.condition].roi_type == '0'?'直接支付roi':'7日总支付roi':''}}
                            <!-- 广告主总roi -->
                            在<span class="blue_tips">{{item.condition!==''?viewForm.triggerData.condition[item.condition].roi_left:''}}-{{item.condition!==''?viewForm.triggerData.condition[item.condition].roi_right:''}} </span>之间，10分钟账户消耗<span class="blue_tips"> 0-{{item.speed_left}} </span>时触发规则组<span class="blue_tips">{{item.group_left!==''?viewForm.rulesDta[item.group_left].group_name:'无触发操作'}}</span>，10分钟账户消耗<span class="blue_tips"> {{item.speed_left}}-{{item.speed_right}} </span>时触发规则组<span class="blue_tips">{{item.group_middle!==''?viewForm.rulesDta[item.group_middle].group_name:'无触发操作'}}</span>，十分钟账户消耗<span class="blue_tips"> {{item.speed_right}} </span>以上时触发规则组<span class="blue_tips">{{item.group_right!==''?viewForm.rulesDta[item.group_right].group_name:'无触发操作'}}</span></div>
                    </div>
                </template>
                <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">请先去添加规则组触发规则</div>
                </div>
                <div class="view_title mt_12">绑定规则组</div>
                <template v-if="viewForm.is_rules">
                    <div class="bind_rules" v-for="(item,index) in viewForm.rulesDta" :key="index">
                        <div class="flexbox flexcenter bind_item">
                            <div class="vw_left">规则组名称</div>
                            <div class="vw_right flex">{{item.group_name}}</div>
                        </div>
                        <div class="flexbox flexcenter bind_item">
                            <div class="vw_left">重启roi</div>
                            <div class="vw_right flex">{{item.call_back_roi}}</div>
                        </div>
                        <div class="flexbox bind_item">
                            <div class="vw_left">规则设置</div>
                            <div class="vw_right flex">
                                <div class="vw_trigger" v-for="(text,index2) in item.operation" :key="index2">
                                    <template v-if="text.operation_type==0">
                                        如果满足计划总消耗在<span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}}</span>，
                                  {{item.roi_type == '0'?'直接支付roi':'7日总支付roi'}}<!-- 计划总roi -->
                                  在<span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span>之间，且10分钟计划消耗在<span class="blue_tips">{{text.speed_left}}-{{text.speed_right}}</span>，10分钟计划roi在<span class="blue_tips">{{text.roi_left}} -{{text.roi_right}}</span>之间，则触发<span class="blue_tips">关停</span>操作
                                    </template>
                                    <template v-else-if="text.operation_type==1">
                                        如果满足计划总消耗在<span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}}</span>，
                                        {{item.roi_type == '0'?'直接支付roi':'7日总支付roi'}}<!-- 计划总roi -->
                                        在 <span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span> 之间，且消耗到达预算设置<span class="blue_tips">{{text.trigger_float}}%</span>，则触发<span class="blue_tips">调预算</span>操作，每次<span class="blue_tips">上调￥{{text.trigger}}</span>
                                    </template>
                                    <template v-else-if="text.operation_type==2">
                                        如果满足计划总消耗在 <span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}} </span>之间 ，
                                        {{item.roi_type == '0'?'直接支付roi':'7日总支付roi'}}<!-- 计划总roi -->
                                        在<span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span>之间，需要维持10分钟消耗（流速）在 <span class="blue_tips">{{text.speed_left}}-{{text.speed_right}}</span>之间。则当10分钟消耗（流速）小于 <span class="blue_tips">{{text.speed_left}}</span> 时触发改出价操作出价<span class="blue_tips">上调 {{text.percentage}}%</span>，反之当10分钟消耗（流速）大于 <span class="blue_tips">{{text.speed_right}}</span> 时触发改出价操作出价<span class="blue_tips">下调 {{text.percentage}}%</span>。两次改出价操作时间间隔为 <span class="blue_tips">{{text.after_time}}分钟</span>，出价范围在<span class="blue_tips">{{text.price_left}}-{{text.price_right}}</span> 之间
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">请先去添加规则组</div>
                </div>
            </div>
            <!-- <div class="demand_footer flexbox flexcenter">
                <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm()" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
            </div> -->
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            type: 1,
            dialogVisible: false,
            viewForm: {},
        };
    },
    created() {},
    methods: {
        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.view_title {
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
}
.mt_12 {
    margin-top: 20px;
}
.vw_left {
    width: 100px;
    font-size: 14px;
    color: #616c85;
    flex-shrink: 0;
}
.vw_right {
    font-size: 14px;
    line-height: 20px;
}
.view_rules {
    padding: 12px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
}
.blue_tips {
    color: #4475ff;
}
.bind_rules {
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
    padding: 6px 12px;
}
.bind_item {
    padding: 10px 0;
}
.vw_trigger {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
    line-height: 20px;
    margin-bottom: 12px;
}
.vw_trigger:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.ana_tips {
    height: 32px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 6px;
    padding: 0 20px;
    margin: 20px 20px 0;
}
</style>
